<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const options = ref(['A相电压', 'B相电压', 'C相电压', 'A相电流', 'B相电流', 'C相电流']);

  const formState = reactive({
    id: '',
    date: '',
  });

  const columns = [
    { title: '测点ID', dataIndex: 'id', key: 'id', width: 90, align: 'center' },
    { title: '时间戳', dataIndex: 'time', key: 'time', align: 'center' },
    { title: '数据类型', dataIndex: 'type', key: 'type', align: 'center' },
    { title: '数值', dataIndex: 'value', key: 'value', align: 'center' },
  ];

  const tableData = ref([
    {
      id: '001',
      time: '2024-06-17 10:00',
      type: 'A相电压',
      value: '220V',
    },
    {
      id: '002',
      time: '2024-06-17 10:00',
      type: 'A相电流',
      value: '30A',
    },
  ]);

  const lineOption = computed(() => {
    return {
      title: {
        text: 'Stacked Line',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });

  const pieOption = computed(() => {
    return {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        top: '5%',
        left: 'center',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' },
          ],
        },
      ],
    };
  });
</script>

<template>
  <div class="container">
    <div class="condition">
      <a-radio-group v-model:value="type" button-style="solid">
        <a-radio-button value="a">电</a-radio-button>
        <a-radio-button value="b">水</a-radio-button>
        <a-radio-button value="c">气</a-radio-button>
        <a-radio-button value="d">暖</a-radio-button>
        <a-radio-button value="e">冷</a-radio-button>
      </a-radio-group>

      <div class="checkbox">
        <a-checkbox-group v-model:value="state" :options="options" />
      </div>

      <div class="formState">
        <span>测点ID:</span>
        <a-select v-model:value="formState.id" placeholder="please select your zone">
          <a-select-option value="shanghai">Zone one</a-select-option>
          <a-select-option value="beijing">Zone two</a-select-option>
        </a-select>
        <span>时间跨度:</span>
        <a-range-picker v-model:value="formState.date" />

        <a-button type="primary">查询</a-button>
      </div>
    </div>

    <div class="info">
      <a-card title="查询结果列表">
        <a-table :columns="columns" :data-source="tableData" rowKey="id"></a-table>
      </a-card>

      <div class="chartShow">
        <a-card title="同比分析图">
          <div class="chart">
            <eChart :option="lineOption" name="lineOption" />
          </div>
        </a-card>

        <a-card title="环比分析图">
          <div class="chart">
            <eChart :option="pieOption" name="pieOption" />
          </div>
        </a-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .checkbox {
    margin: 10px 0;
  }
  .formState {
    margin: 10px 0;
    display: flex;
    align-items: center;
    span {
      margin: 0 10px;
    }

    .ant-select {
      width: 250px;
    }

    button {
      margin-left: 20px;
    }
  }

  .info {
    display: flex;

    .ant-card {
      width: 50%;
      margin: 0 5px;
      min-height: 70vh;
    }

    .chartShow {
      width: 100%;
      margin: 0 5px;

      .ant-card {
        width: 100%;
        height: 50%;
        min-height: 40vh;

        .chart {
          width: 100%;
          height: 30vh;
        }
      }
    }
  }
</style>
